<template>
  <div class="page-content">
    <div class="comm-content" ref="main"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myEcharts: null,
    };
  },
  methods: {
    // 适配屏幕
    screen() {
      this.myEcharts.resize();
      // 计算一个文字大小的比例
      let width = this.$refs.main.offsetWidth;
      let num = (width / 100) * 5;
      let options = {
        title: {
          textStyle: {
            // 设置主题样式
            fontSize: num,
          },
        },
      };
      // 修改图标样式后要重新绘制
      this.myEcharts.setOption(options);
    },
    // 初始化图标
    initEcharts() {
      let main = this.$refs.main;
      // 初始化echarts
      this.myEcharts = this.$echarts.init(main,this.themeStatus);
      /** @type EChartsOption */
      let options = {
        title: {
          text: "各地区种植面积统计TOP10",
        },
        xAxis: {},
        tooltip: {
          // 提示框
          show: true,
          axisPointer: {
            type: "cross",
          },
        },
        yAxis: {
          show: true,
          type: "category",
          // data:dataName
        },
        toolbox: {
          // 工具箱
          show: true,
          feature: {
            saveAsImage: {
              //保存图片
              type: "png",
            },
            dataView: {
              show: true,
            },
          },
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
            },
            itemStyle: {
              //设置图标颜色
              borderRadius: [0, 100, 100, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x1: 1,
                y1: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0F3357",
                  },
                  {
                    offset: 1,
                    color: "#36BFE5",
                  },
                ],
              },
            },
            // data:dataArea
          },
        ],
      };
      this.myEcharts.setOption(options);
    },
    // 获取数据
    async getData() {
      let dataList = await this.$http("/api/plantingAreaTop");
      // console.log(dataList);
      dataList.data.sort(function (a, b) {
        return a.area - b.area;
      });
      let dataName = dataList.data.map((item) => {
        // 名字
        return item.name;
      });
      let dataArea = dataList.data.map((item) => {
        // 数值
        return item.area;
      });
      this.setEcharts(dataName, dataArea);
    },
    // 绘制图标
    setEcharts(dataName, dataArea) {
      let options = {
        yAxis: {
          data: dataName,
        },
        series: [
          {
            data: dataArea,
          },
        ],
      };
      this.myEcharts.setOption(options);
    },
  },
  mounted() {
    this.initEcharts();
    this.getData();
    window.addEventListener("resize", this.screen);
    this.screen();
  },
  destroyed() {
    window.removeEventListener("reset", this.screen);
  },
  watch: {
    themeStatus() {
      this.myEcharts.dispose();
      this.initEcharts();
      this.getData();
      this.screen();
    },
  },
  computed: {
    // 计算属性
    themeStatus() {
      return this.$store.state.theme;
    },
  },
  filters: {},
  components: {},
};
</script>
<style scoped></style>
